<template>
	<view>
		<!-- 我的团队 -->
		<cus-navbar navbar :title="$t('index39')"></cus-navbar>
		<view class="main-padding">
			<view class="gap-20"></view>
			<view class="team-card flex flex-direction justify-end">
				<!-- 团队总人数 -->
				<view class="color-8d size-24">{{$t('index45')}}</view>
				<view class="size-48 text-bold">{{info.team_count||0}}</view>
				<view class="size-24 mt-15">
					<!-- 直推人数 -->
					<text class="mr-10 color-8d">{{$t('index46')}}</text>
					<text class="mr-60">{{info.inviter_count||0}}</text>
					<!-- 已激活 -->
					<text class="mr-10 color-8d">{{$t('index47')}}</text>
					<text>{{info.activate_count||0}}</text>
				</view>
			</view>

			<view class="team-list">
				<block v-for="(item,index) in list" :key="index">
					<view class="team-cell flex justify-between align-center">
						<view class="">
							<view class="size-28">{{item.address_hide}}</view>
							<view class="size-24 color-71 mt-10">{{item.create_at}}</view>
						</view>
						<!-- 已激活 -->
						<view class="team-act-tag" v-if="item.is_activate==1">{{$t('index47')}}</view>
						<!-- 未激活 -->
						<view class="team-tag" v-else>{{$t('index48')}}</view>
					</view>
					<view class="main-padding" v-if="index<list.length-1">
						<view class="main-line"></view>
					</view>
				</block>
			</view>
			<cus-empty v-show="list.length==0"></cus-empty>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list:[],
				page:1,
				limit:10,
				loadStatus:'loading',
				info:{}
			}
		},
		onLoad() {
			this.loadData(true)
			this.loadInfo()
		},
		onPullDownRefresh() {
			this.loadData(true, true)
			this.loadInfo()
		},
		onReachBottom() {
			if(this.loadStatus=='noMore')return
			this.page++
			this.loadData()
		},
		methods:{
			loadData(flag, refresh){
				if(flag)this.page=1
				this.loadStatus = 'loading'
				this.$api.post('/data/api.auth.invest/teamList',{
					page:this.page,
					limit:this.limit
				}).then(res=>{
					this.list = this.list.concat(res.list)
					this.loadStatus = res.list.length==this.limit?'more':'noMore'
					if(refresh)uni.stopPullDownRefresh()
				})
			},
			loadInfo(){
				this.$api.post('/data/api.auth.invest/teamInfo').then(res=>{
					this.info = res
				})
			}
		}
	}
</script>

<style lang="scss">
	.team-card {
		height: 232rpx;
		background-image: url('../../static/imgs/13.png');
		background-size: 100% 100%;
		padding: 0 0 30rpx 40rpx;
	}

	.team-list {
		margin-top: 30rpx;
		background-color: #1D1E25;
		border-radius: 20rpx;

		.team-cell {
			padding: 30rpx 0 30rpx 30rpx;

			.team-act-tag {
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 22rpx 0 0 22rpx;
				background-color: rgba(67, 235, 149, 0.2);
				padding: 0 30rpx 0 20rpx;
				color: #00FF9A;
			}

			.team-tag {
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 22rpx 0 0 22rpx;
				background-color: rgba(153, 153, 153, 0.2);
				padding: 0 30rpx 0 20rpx;
				color: #999999;
			}
		}
	}
</style>